<template>
  <div>
      <div id="portfolio" class="portfolio">
		<div class="container">
			<h1>客照欣赏</h1>
			<div class="sap_tabs">			
				<div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
					<ul class="resp-tabs-list">
						<li class="resp-tab-item resp-tab-active" aria-controls="tab_item-0" role="tab"><span>所有</span></li>
						<li class="resp-tab-item" aria-controls="tab_item-1" role="tab"><span>女人</span></li>
						<li class="resp-tab-item" aria-controls="tab_item-2" role="tab"><span>现代</span></li>
						<li class="resp-tab-item" aria-controls="tab_item-3" role="tab"><span>时尚</span></li>
						<li class="resp-tab-item" aria-controls="tab_item-4" role="tab"><span>其他</span></li>					
					</ul>	
					<div class="clearfix"> </div>	
					<div class="resp-tabs-container">
						<h2 class="resp-accordion resp-tab-active" role="tab" aria-controls="tab_item-0"><span class="resp-arrow"></span>All</h2><div class="tab-1 resp-tab-content resp-tab-content-active" style="display:block" aria-labelledby="tab_item-0">
							<div class="categorie-grids cs-style-1">
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/1.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/1.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									 <figure>
										<img src="../assets/images/2.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/2.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/3.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/3.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/4.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/4.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/5.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/5.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									 <figure>
										<img src="../assets/images/6.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/6.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/7.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/7.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									 <figure>
										<img src="../assets/images/8.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/8.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/9.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/9.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/10.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/10.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/11.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/11.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/12.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/12.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="clearfix"></div>
							</div>
						</div>
						<h2 class="resp-accordion" role="tab" aria-controls="tab_item-1"><span class="resp-arrow"></span>Feminine</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-1">
							<div class="categorie-grids cs-style-1">
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/7.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/7.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									 <figure>
										<img src="../assets/images/5.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/5.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/3.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/g3.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/4.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/4.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/1.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/1.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								 <div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/2.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/2.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/10.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/10.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/11.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/11.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="clearfix"></div>
							</div>
						</div>
						<h2 class="resp-accordion" role="tab" aria-controls="tab_item-2"><span class="resp-arrow"></span>Modern</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-2">
							<div class="categorie-grids cs-style-1">
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/1.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/1.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									 <figure>
										<img src="../assets/images/4.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/4.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/2.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/2.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/4.jpg" alt=""> 
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/4.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/5.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/5.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="clearfix"> </div>
							</div>
						</div>
						<h2 class="resp-accordion" role="tab" aria-controls="tab_item-3"><span class="resp-arrow"></span>Trendy</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-3">
							<div class="categorie-grids cs-style-1">
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/2.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/2.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
							
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/3.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/3.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/4.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/4.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/5.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/5.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								 <div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/6.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/6.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/7.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/7.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="clearfix"> </div>
							</div>
						</div>
								<h2 class="resp-accordion" role="tab" aria-controls="tab_item-4"><span class="resp-arrow"></span>Unusual</h2><div class="tab-1 resp-tab-content" aria-labelledby="tab_item-4">
							<div class="categorie-grids cs-style-1">
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/6.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/6.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								 </div>
								<div class="col-md-4 cate-grid grid">
									 <figure>
										<img src="../assets/images/8.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/8.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/9.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/9.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
								<div class="col-md-4 cate-grid grid">
									<figure>
										<img src="../assets/images/10.jpg" alt="">
										<figcaption>
											<h3>Etiquette</h3>
											<span>Accusantium Dolor</span>
											<a class="example-image-link" href="../assets/images/10.jpg" data-lightbox="example-1" data-title="Etiquette">VIEW</a>
										</figcaption>
									</figure>
								</div>
						
								<div class="clearfix"> </div>
							</div>
						</div>
					</div>						
				</div>
			</div>
		</div>
	</div>
  </div>
</template>


<script>
export default {
  data () {
    return {
    
    }
  }
}
</script>

<style scoped>

</style>